<template>
  <div>
    <!-- 小说内容 -->
    <div class="read-section">
      <div class="read-comment-total">{{ read_lists_title }}</div>
      <div class="read-title">
        <p>{{ read_lists_title }}</p>
        <van-cell @click="showPopup"
          ><i></i><span>{{ comment_lists.length }}</span></van-cell
        >
        <van-popup
          v-model="show"
          round
          position="bottom"
          :style="{ height: '80%' }"
        >
          <div class="comment-info">
            <div class="comment_header">
              <p>评论</p>
              <p>{{ comment_lists.length }}条</p>
            </div>
            <div
              class="comment_item"
              v-for="item in comment_lists"
              :key="item.id"
            >
              <div class="img">
                <img :src="item.img" alt="" />
              </div>
              <div class="right">
                <p>{{ item.name }}</p>
                <div class="middle">
                  <p>{{ item.content }}</p>
                  <div class="img_two">
                    <p
                      :class="[
                        'iconfont',
                        { 'icon-dianzan_kuai': item.flag },
                        { 'icon-good': !item.flag },
                      ]"
                      @click="thumbs(item.id)"
                    ></p>
                    <!-- <p>{{ item.flag ? 1 : "" }}</p> -->
                  </div>
                </div>
                <div class="bottom">
                  <p>10月28日</p>
                  <p>IP地址:广东</p>
                </div>
              </div>
            </div>
          </div>
          <div class="comment_search">
            <span class="iconfont icon-cuowu" @click="show = false"></span>
            <input
              type="text"
              placeholder="发表一条神评论吧"
              @keyup.enter="jump"
            />
          </div>
        </van-popup>
      </div>
      <div class="read-content" @click="flag = !flag" v-if="show_three">
        <p v-for="item in read_lists_text" :key="item">{{ item }}</p>
      </div>
    </div>

    <!-- 头部 -->
    <div class="read_head" v-if="flag">
      <div class="top">
        <p class="iconfont icon-xiaoyuhao" @click="$router.go(-1)"></p>
        <router-link
          tag="p"
          to="/bookshif"
          class="iconfont icon-shujia"
        ></router-link>
      </div>
    </div>

    <!-- 底部 -->
    <div class="toggle" v-if="flag">
      <div class="toggle_one" @click="del">
        <p class="iconfont icon-youqianjin"></p>
        <p>上一章</p>
      </div>
      <div class="toggle_one" @click="add">
        <p class="iconfont icon-zuoqianjin"></p>
        <p>下一章</p>
      </div>
      <div class="toggle_one">
        <p class="iconfont icon-mulu"></p>
        <van-cell @click="showPopup_two">
          <p>目录</p>
        </van-cell>
        <van-popup
          v-model="show_two"
          position="right"
          :style="{ height: '100%', width: '330px', color: 'black' }"
        >
          <!-- 最新章节目录 -->
          <div class="cata_title">
            <p>不科学御兽最新章节目录</p>
            <p>书签</p>
          </div>
          <!-- 章节总数 -->
          <div class="sum_chapter">
            <div class="left">共624章</div>
            <div class="right">
              <span class="iconfont icon-daoxu"></span>倒序
            </div>
          </div>
          <!-- 正文卷 -->
          <div class="body_volume">
            <p>正文卷</p>
          </div>
          <!-- 目录内容 -->
          <div class="catalogue_content">
            <div class="cata_lists">
              <div
                class="cata_item"
                v-for="item in catalogut_name"
                :key="item.id"
                @click="modify(item.id)"
              >
                {{ item.chapter_Name }}
                <!-- <span class="iconfont icon-jiesuo"></span> -->
              </div>
            </div>
          </div>
        </van-popup>
      </div>
    </div>

    <!-- 阅读收费 -->
    <div class="read_charge" v-if="show_five">
      <p @click="flag = !flag">价格20起点币,余额为{{ coin }}起点币</p>
      <router-link tag="span" to="/recharge" v-if="!show_four"
        >去充值</router-link
      >
      <div type="primary" @click.stop="Dialog">
        <span v-if="show_four">购买</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getcatalogueData } from "../api/home.js";
export default {
  data() {
    return {
      read_lists_title: "",
      read_lists_text: [],
      flag: false,
      read_id: this.$route.query.id,
      show: false,
      catalogut_name: null,
      show_two: false,
      comment_lists: [
        {
          id: 1,
          img: "https://qidian.qpic.cn/qd_face/349573/8220169/100",
          name: "花开云烟舒",
          content: "太好看了11111111111111",
          flag: true,
        },
        {
          id: 2,
          img: "	https://qidian.qpic.cn/qd_face/349573/9705805/100",
          name: "东阜妫睽",
          content: "张三先生",
          flag: false,
        },
        {
          id: 3,
          img: "https://qidian.qpic.cn/qd_face/349573/8563284/100",
          name: "花开云烟舒",
          content: "leichy",
          flag: false,
        },
      ],
      comment_lists_id: 10,
      coin: null,
      show_three: false,
      show_four: true,
      show_five: true,
    };
  },
  created() {
    this.data_togggle();
    getcatalogueData().then((data) => {
      console.log(data);
      this.catalogut_name = data.data;
    });
    this.coin = window.localStorage.coin;
    if (parseInt(window.localStorage.coin) >= 20) {
      this.show_three = false;
      this.show_four = true;
    } else {
      this.show_three = true;
      this.show_four = false;
    }
  },
  methods: {
    data_togggle() {
      getcatalogueData().then((data) => {
        let index = data.data.findIndex((item) => item.id == this.read_id);
        this.read_lists = data.data[index];
        this.read_lists_title = this.read_lists.chapter_Name;
        this.read_lists_text = this.read_lists.text;
        console.log(this.read_id);
        window.scrollTo(0, 0);
      });
    },
    add() {
      if (this.$route.query.id == 1112) {
        this.$route.query.id = 1112;
      } else {
        this.$route.query.id = parseInt(this.$route.query.id) + 1;
      }
      this.read_id = this.$route.query.id;
      this.data_togggle();
      this.show_three = false;
      this.show_four = true;
      this.show_five = true;
    },
    del() {
      if (this.$route.query.id == 1101) {
        this.$route.query.id = 1101;
      } else {
        this.$route.query.id = parseInt(this.$route.query.id) - 1;
      }
      this.read_id = this.$route.query.id;
      this.data_togggle();
      this.show_three = true;
      this.show_five = false;
    },
    showPopup() {
      this.show = true;
    },
    showPopup_two() {
      // this.show=false;
      this.show_two = true;
    },
    modify(id) {
      this.read_id = id;
      this.$route.query.id = this.read_id;
      this.data_togggle();
      this.show_two = !this.show_two;
      this.coin = window.localStorage.coin;
      if (parseInt(window.localStorage.coin) >= 20) {
        this.show_three = false;
        this.show_four = true;
        this.show_five = true;
      } else {
        this.show_three = true;
        this.show_four = false;
        this.show_three = false;  
      }
    },
    comment() {
      this.show_two = !this.show_two;
    },
    thumbs(id) {
      let index = this.comment_lists.findIndex((item) => item.id == id);
      this.comment_lists[index].flag = !this.comment_lists[index].flag;
    },
    jump(event) {
      let name = event.target.value;
      if (!name) {
        return;
      }
      this.comment_lists.push({
        id: this.comment_lists_id,
        img: "https://img0.baidu.com/it/u=1488204534,557393807&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
        name: "kunkun",
        content: name,
        flag: false,
      });
      event.target.value = "";
      this.comment_lists_id += 1;
    },
    // buy() {
    //   this.show_three = true;
    //   this.show_five = false;
    //   window.localStorage.coin = parseInt(window.localStorage.coin) - 20;
    //   this.coin = window.localStorage.coin;
    //   this.$toast("购买成功");
    // },
    Dialog() {
      this.$dialog
        .confirm({
          title: "提醒",
          message: "确认购买吗？",
        })
        .then(() => {
          this.show_three = true;
          this.show_five = false;
          window.localStorage.coin = parseInt(window.localStorage.coin) - 20;
          this.coin = window.localStorage.coin;
          this.$toast("购买成功");
        })
        .catch(() => {
          console.log("取消");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.buy {
  text-align: center;
  position: absolute;
  top: 314px;
  left: 0;
  right: 0;
  margin: auto;
  p {
    &:nth-child(1) {
      padding: 5px 0;
    }
  }
  span {
    padding: 5px 20px;
    background-color: #ed424b;
    color: #fff;
    margin-top: 30px;
    border-radius: 17px;
  }
}
.read_charge {
  text-align: center;
  position: absolute;
  top: 314px;
  left: 0;
  right: 0;
  margin: auto;
  p {
    &:nth-child(1) {
      padding: 5px 0;
      height: 33px;
      line-height: 33px;
      font-size: 14px;
      letter-spacing: 1px;
    }
  }
  span {
    padding: 5px 62px;
    background-color: #ed424b;
    color: #fff;
    margin-top: 30px;
    border-radius: 17px;
  }
}

// 头部
.read_head {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  height: 40px;
  line-height: 40px;
  background: inherit;
  background: #33373d;
  color: #fff;
  padding: 0 15px;
  .top {
    display: flex;
    justify-content: space-between;
  }
}

// 底部
.toggle {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  background: inherit;
  background: #33373d;
  color: #fff;
  display: flex;
  height: 60px;
  justify-content: space-around;
  align-items: center;
  .toggle_one {
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    p {
      &:nth-child(1) {
        font-size: 18px;
      }
      &:nth-child(2) {
        font-size: 14px;
      }
    }
    .van-cell {
      background: #33373d;
      padding: 0;
      .van-cell__value {
        background: #33373d;
        p {
          background: #33373d;
          color: #fff;
          font-size: 14px;
        }
      }
    }
    .van-popup {
      .cata_title {
        padding: 10px 0px 0 0px;
        display: flex;
        text-align: center;
        p {
          font-size: 13px;
          width: 50%;
          padding-bottom: 10px;
          &:nth-child(1) {
            color: #ee2737;
            border-bottom: 1px solid #ee2737;
          }
          &:nth-child(2) {
            border-bottom: 1px solid #e3e4e6;
            color: #969ba3;
          }
        }
      }
      .sum_chapter {
        padding: 15px;
        display: flex;
        justify-content: space-between;
        .left {
          font-weight: 600;
          font-size: 15px;
        }
        .right {
          font-size: 14px;
          span {
            margin-right: 5px;
          }
        }
      }
      .body_volume {
        width: 100%;
        height: 30px;
        line-height: 30px;
        color: #969ba3;
        background-color: #f6f7f9;
        font-size: 12px;
        text-indent: 10px;
        p {
          color: #969ba3;
          background-color: #f6f7f9;
          font-size: 12px;
        }
      }
      .catalogue_content {
        .cata_lists {
          .cata_item {
            padding: 15px;
            padding-left: 0;
            margin-left: 15px;
            font-size: 14px;
            border-bottom: 1px solid #e3e4e6;
            position: relative;
            span {
              position: absolute;
              right: 15px;
              top: 18px;
            }
          }
        }
      }
    }
  }
}

.read-comment-total {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background: inherit;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  text-indent: 17px;
  // padding: 10px;
}

.read-section {
  background-color: #fff;
  position: relative;
}
.read-title {
  padding: 38px 15px;
  font-size: 30px;
  color: #33373d;
  font-weight: bold;
  position: relative;
  display: flex;
  .van-cell {
    width: 50px;
    padding: 0;
    position: relative;
    i {
      display: block;
      width: 26px;
      height: 20px;
      background: url("https://imgservices-1252317822.image.myqcloud.com/image/030420220135205/b17bddcb.svg");
      margin-top: 11px;
    }
    span {
      position: absolute;
      left: 11px;
      top: 9px;
      color: #bc4747;
      font-size: 12px;
    }
  }
  .van-popup {
    .comment-info {
      padding-bottom: 80px;
      .comment_header {
        display: flex;
        padding: 15px;
        align-items: center;
        p {
          &:nth-child(1) {
            font-weight: normal;
            font-size: 16px;
            color: #191919;
          }
          &:nth-child(2) {
            font-weight: normal;
            font-size: 14px;
            color: #ccc;
            margin-left: 5px;
            align-items: center;
            margin-top: 3px;
          }
        }
      }
      .comment_item {
        padding: 0 15px 15px 15px;
        display: flex;
        font-size: 12px;
        font-weight: normal;
        .img {
          width: 62px;
          height: 62px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .right {
          flex: 1;
          margin-left: 5px;
          & > p {
            font-size: 14px;
            color: black;
            font-weight: 600;
          }
          .middle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            p {
              flex: 9;
              font-size: 14px;
              color: #969ba3;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .img_two {
              flex: 1;
              display: flex;
              padding: 7px 0;
            }
          }
          .bottom {
            display: flex;
            justify-content: space-between;
            color: #969ba3;
          }
        }
      }
    }
    .comment_search {
      display: flex;
      padding: 15px;
      align-items: center;
      font-size: 18px;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      input {
        flex: 1;
        border: none;
        background-color: #f6f7f9;
        height: 50px;
        line-height: 50px;
        text-indent: 18px;
        border-radius: 22px;
        margin-left: 5px;
      }
    }
  }
}
.read-content {
  line-height: 35px;
  p {
    text-indent: 2em;
    padding: 0 15px;
    font-size: 18px;
    line-height: 35px;
    margin: 0.8em 0;
  }
}
</style>
